<template>
  <view class="page">
    
    <!-- 基本使用 -->
    <view class="title">基本使用</view>
    <vf-select :selects="selects" @select="select" :type="1"></vf-select>
    
    <!-- 设置选中颜色 -->
    <view class="title">设置选中颜色</view>
    <vf-select :selects="selects" @select="select1" :type="1" color="#999" activeColor="orange"></vf-select>
    
    <!-- 点击最后一个不关闭 -->
    <view class="title">点击最后一个不关闭</view>
    <vf-select :selects="selects" @select="select1" :type="1" :lastClose="false" ref="select"></vf-select>
    
    <!-- 显示过滤 -->
    <view class="title">显示过滤</view>
    <vf-select :selects="selects" @select="select" :type="1" :filter="true" @filter="openFilter"></vf-select> 
    
    <!-- 显示布局 -->
    <view class="title">显示布局</view>
    <vf-select :selects="selects" @select="select" :type="1" :typeset="true" @typeset="setTypeSet"></vf-select> 
    
    <!-- 综合使用 -->
    <view class="title">综合使用</view>
    <vf-select :selects="selects" @select="select" :type="1" :typeset="true" @typeset="setTypeSet" :filter="true" @filter="openFilter"></vf-select> 

    <!-- 设置宽高 -->
    <view class="title">设置宽高</view>
    <view class="select-box">
      <vf-select :selects="selects" @select="select" :type="1" :width="500" :height="100"></vf-select> 
    </view>
    
    <view class="content">
      我是内容
    </view>
    
  </view>
</template>

<script>
import selects from './select.js';
export default {
  data() {
    return {
      selects
    }
  },
  
  methods: {
    select(e) {
      console.log(e)
    },
    
    select1(e) {
      console.log(e);
      setTimeout(() => {
        this.$refs.select.close();
      }, 1000)
    },
    
    openFilter() {
      this.$$t.msg('打开筛选')
    },
    
    setTypeSet(e) {
      this.$$t.msg('设置排版类型为：' + e)
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  padding: 20rpx 24rpx;
  font-size: 28rpx;
  font-weight: bold;
  background-color: #f3f3f3;
}
.select-box{
  display: flex;
  justify-content: center;
}

.content {
  @include page;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
